<template>
  <div class="dialog-container">
    <div class="dialog-content">
      <el-upload
        class="unDrag"
        ref="upload"
        :show-file-list="false"
        :file-list="fileList"
        :limit="limit"
        :action="action"
        :headers="{
          token: getToken(),
        }"
        :before-upload="handleBeforeUpload"
        :on-success="handleSuccess"
        :on-progress="handleProgress"
        list-type="picture-card"
      >
        <i class="el-icon-plus"></i>
      </el-upload>
      <draggable v-model="dragList" chosenClass="chosen" forceFallback="true" animation="1000" filter=".unDrag" @start="handleDragStart" @end="handleDragEnd" class="drag-box">
        <div class="img-box" v-for="(item, index) in dragList" :key="index">
          <img :src="item.url" class="img" />
          <div v-if="item.status === 'success'" class="icon-success">
            <i class="el-icon-check"></i>
          </div>
          <div v-else class="icon-loading">
            <i class="el-icon-loading"></i>
            <p class="text">上传中...</p>
          </div>
          <div v-if="item.status === 'success'" class="icon-delete">
            <i class="el-icon-delete" @click.stop.prevent="handleDelete(index)"></i>
          </div>
        </div>
      </draggable>
    </div>
  </div>
</template>

<script>
import { baseApi } from '@/config'
import { getToken } from '@/utils/auth'
import draggable from 'vuedraggable'

export default {
  name: 'ImageUpload',
  components: { draggable },
  data() {
    return {
      limit: 10,
      fileList: [],
      dragList: [],
      action: baseApi + 'back_front/img_upload/',
    }
  },
  mounted() {
    this.dragList = this.fileList = [
      { uid: 1, status: 'success', url: 'https://img2.baidu.com/it/u=4045137561,4227164018&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=1280' },
      { uid: 2, status: 'success', url: 'https://img.pconline.com.cn/images/upload/upc/tx/itbbs/2101/25/c1/251135935_1611532823091_mthumb.jpg' },
      { uid: 3, status: 'success', url: 'http://img0.baidu.com/it/u=375485806,902161195&fm=253&app=138&f=JPEG?w=800&h=1280' },
      { uid: 4, status: 'success', url: 'http://img1.baidu.com/it/u=701133623,3750671343&fm=253&app=138&f=JPEG?w=800&h=1280' },
    ]
  },
  methods: {
    getToken() {
      return getToken()
    },
    // 上传前
    handleBeforeUpload() {},
    // 上传中
    handleProgress(event, file, fileList) {
      this.dragList = fileList
      // console.log(this.dragList)
    },
    // 上传成功
    handleSuccess(response, file, fileList) {
      this.fileList = this.dragList = fileList
      // console.log(this.dragList)
    },
    // 删除图片
    handleDelete(index) {
      this.fileList.splice(index, 1)
      this.dragList = this.fileList
    },
    //开始拖拽事件
    handleDragStart() {},
    //拖拽结束事件
    handleDragEnd() {},
  },
}
</script>

<style scoped lang="scss">
.unDrag {
  margin: 0 8px 8px 0;
}
/*选中样式*/
.chosen {
  border: solid 2px #3089dc !important;
}

.img-box {
  width: 148px;
  height: 148px;
  overflow: hidden;
  background-color: #fff;
  border: 1px solid #c0ccda;
  border-radius: 6px;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  margin: 0 8px 8px 0;
  position: relative;
  font-size: 12px;
  color: #ffffff;
  .img {
    width: 100%;
    height: 100%;
    user-select: none; /* 标准语法 */
  }
  .icon-success {
    position: absolute;
    right: -15px;
    top: -6px;
    width: 40px;
    height: 24px;
    background: #13ce66;
    text-align: center;
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
    -webkit-box-shadow: 0 0 1pc 1px rgba(0, 0, 0, 0.2);
    box-shadow: 0 0 1pc 1px rgba(0, 0, 0, 0.2);
    i {
      margin-top: 11px;
      -webkit-transform: rotate(-45deg);
      transform: rotate(-45deg);
    }
  }
  .icon-loading,
  .icon-delete {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background: rgba(0, 0, 0, 0.5);
    font-size: 20px;
    .text {
      font-size: 14px;
    }
  }
  .icon-loading i {
    font-size: 28px;
  }
  .icon-delete {
    display: none;
    i {
      cursor: pointer;
    }
  }
  &:hover {
    .icon-delete {
      display: flex;
    }
  }
}
.dialog-content {
  display: flex;
  justify-content: flex-start;
  align-items: center;
}
.drag-box {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  flex-wrap: wrap;
}
</style>
